<template>
    <el-container>
      <el-header style="height: 50px;">
        <Personinfo style="height: 50px;"></Personinfo>
      </el-header>
      <el-divider style="margin: 0;padding: 0;"></el-divider>
      <el-main >
        <el-row style="background-color: #f4f2f5">
          <el-image  style="margin-left: 200px;width: 200px;height: 150px;" :src="logo_url"></el-image>
        </el-row>
        <el-row style="background-image: url('./static/login_page_bg.jpg');background-repeat:no-repeat;background-size:100% 100%;">
            <el-tabs type="border-card" style="width: 400px;
                                              height:380px;
                                              margin-left: 1200px;
                                              margin-top: 35px;
                                              margin-bottom: 35px;
                                              background-color: #999999" >
              <el-form ref="form" :model="form" style="margin: 20px 0px" label-width="40px" size="mini">
                <el-form-item>
                  <div style="text-align: center;margin-left: -46px;"><h2 style="margin: 0;padding: 0">会员登录</h2></div>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="form.name"  placeholder="请输入手机号/邮箱/用户名" suffix-icon="el-icon-user" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="form.password" placeholder="请输入密码" suffix-icon="el-icon-lock" type="password" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="form.verificationCode" placeholder="验证码" style="width: 230px;height: 30px;margin: -8px 1px;"></el-input>
                  <el-image style="width: 60px;height: 30px;margin: -10px 3px;" @click="refreshCode"
                            :src="captchaUrl"
                            ></el-image>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col style="width: 200px;">
                      <el-checkbox-group v-model="form.password">
                        <el-checkbox label="记住账号密码" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                    <el-col style="width: 100px;margin-left: 25px;">
                      <el-link :underline="false">忘记密码？</el-link>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="submit" style="width: 300px;background-color: #dcdfe6" @click="doLogin">登录</el-button>
<!--                  <el-button style="width: 300px;background-color: #dcdfe6" @click="test">test</el-button>-->
                </el-form-item>
              </el-form>
            </el-tabs>
        </el-row>
      </el-main>
      <el-footer>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="9" :offset="9">
            <footerx></footerx>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
</template>

<script>
import footerx from "./footerx";
import Personinfo from "./Personinfo";
import Logox from "./Logox";
import * as test from "./../api/test"
//import router from "../router/router"
import axios from "axios";
import * as Auth from './../api/auth';
import {Login} from "./../api/auth";
import instance from "../api";
import {isPersonal} from "../assets/util";

export default {
  components: {Logox, Personinfo, footerx},
  name: "Login",
  data(){
    return {
      form:{name:"admin",password:'admin123',verificationCode:''},
      captchaUrl:this.getCaptchaUrl(),
      logo_url:'./static/logo.png'
    };
  },
  methods:{
    getCaptchaUrl(){
      return instance.defaults.baseURL+'/captcha/captchaImage?type=math&s='+new Date().getTime() ;
    },
    refreshCode(){
        this.captchaUrl = this.getCaptchaUrl();
    },
    doLogin(){
      Login.r({userName:this.form.name,password:this.form.password,validateCode:this.form.verificationCode}).then(result=>{
        if(result.data.code === 0){
          sessionStorage.setItem("token",result.data.data.token);
          sessionStorage.setItem("name",result.data.data.user.loginName);
          sessionStorage.setItem("userType",result.data.data.user.userType);
          if(!isPersonal()){
            sessionStorage.setItem("enterprise",JSON.stringify(result.data.data.enterprise));
          }
          instance.defaults.headers.common['Authorization'] = result.data.data.token
          this.$router.push("home");
        } else {
          this.$message(result.data.msg);
          this.refreshCode();
          this.$router.push("login");
        }
      }).catch(function (error) {});
    },
    test(){
      // test.request.r({userId:'1312312',username:'zhangsan',password:'123',mobile:'15865445854'}).then(d=>{
      //   debugger;
      //   alert(d)
      // });

      // axios.get("http://127.0.0.1/test/user/2",{a:'1',b:'2'})
      //     .then(d=>{
      //       debugger;
      //       console.log(d);
      //     })
      //     .catch(function (error) {
      //       console.log(error);
      //     })
    }
  }
}
</script>

<style scoped>
.el-main{
  margin: 0;
  padding: 0;
}
/deep/ .el-divider--horizontal{
  padding: 0;
  margin: 0;
}
</style>